<template>
  <div>
    <search-line>
      <el-form :inline="true" :model="searchObj">
        <el-form-item label="手机号">
          <el-input v-model.trim="searchObj.phone" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="searchObj.roleId" placeholder="请选择角色" clearable>
            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search">
          搜索
        </el-button>
      </el-form>
      <div slot="rightButtons">
        <el-button v-permission="'user_list_create'" type="primary" icon="el-icon-plus" @click="showAddUser">
          新建
        </el-button>
      </div>
    </search-line>
    <x-table v-loading="loading" v-bind="tableOption" @changePage="changeTablePage" @clickBtn="tableBtnClick" />
    <x-dialog :visible.sync="addDialogVisible" :title="isEdit ? '编辑' : '新增'" @close="addDialogClose" @submit="submitForm">
      <el-form ref="addForm" :model="addForm" label-width="80px">
        <el-form-item prop="username" label="用户名" :rules="rules.username">
          <el-input v-model="addForm.username" :disabled="isEdit" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="phone" label="手机号" :rules="rules.phone">
          <el-input v-model="addForm.phone" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item prop="password" label="密码" :rules="rules.password">
          <el-input v-model="addForm.password" show-password placeholder="请输入登录密码" />
        </el-form-item>
        <el-form-item v-if="!isEdit" prop="roleId" label="角色" :rules="rules.required">
          <el-select v-model="addForm.roleId" class="w-100" placeholder="请选择所属角色">
            <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="!isEdit" prop="disabled" label="启用状态">
          <el-switch v-model="addForm.disabled" :active-value="1" :inactive-value="0" />
        </el-form-item>
      </el-form>
    </x-dialog>
  </div>
</template>
<script>
import * as api from '../../api/user'
import rules from '../../utils/rules.js'
import { userList } from './data'
import { cmdRSAEncrypt } from '@/utils/encrypt'
import { hint } from '../../utils/tools'

export default {
  components: {},
  data() {
    return {
      loading: false,
      isEdit: false,
      addDialogVisible: false,
      roleList: [],
      searchObj: {},
      addForm: {
        disabled: 1
      },
      userList: [],
      tableOption: userList,
      rules
    }
  },
  created() {
    this.getList()
    this.getRoleList()
  },
  methods: {
    search() {
      this.tableOption.pages.page = 1
      this.getList()
    },
    editUser(params) {
      api.editUser(params).then(res => {
        hint.success('操作成功')
        this.addDialogVisible = false
        this.getList()
      })
    },
    tableBtnClick(row, btn) {
      if (btn.prop === 'roleId') {
        this.editUser({ memberId: row.memberId, roleId: row.roleId })
        return
      }
      if (btn.prop === 'disabled') {
        this.editUser({ memberId: row.memberId, disabled: row.disabled })
        return
      }
      if (btn.name === 'edit') {
        this.addForm = {
          username: row.username,
          memberId: row.memberId
        }
        this.addDialogVisible = true
        this.isEdit = true
        return
      }
      if (btn.name === 'del') {
        this.$confirm(`确定删除用户${row.username}吗？删除后不可恢复`)
          .then((res) => {
            api.delUser({ memberId: row.memberId }).then((res) => {
              hint.success('操作成功')
              this.getList()
            })
          })
          .catch((e) => {})
      }
    },
    submitForm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.addForm.roleIds = [this.addForm.roleId]
          if (this.isEdit) {
            this.editUser({ ...this.addForm, password: this.addForm.password ? cmdRSAEncrypt(this.addForm.password) : undefined })
          } else {
            const data = {
              ...this.addForm,
              password: cmdRSAEncrypt(this.addForm.password)
            }
            api.addUser(data).then((res) => {
              hint.success('操作成功')
              this.addDialogVisible = false
              this.getList()
            })
          }
        }
      })
    },
    addDialogClose() {
      this.addForm = {
        disabled: 1
      }
    },
    getRoleList() {
      api.getRoleList(this.params).then((res) => {
        this.roleList = res.records
        this.tableOption.columns[2].selectData = res.records
      })
    },
    showAddUser() {
      this.isEdit = false
      this.addDialogVisible = true
    },
    changeTablePage(page) {
      this.tableOption.pages.page = page
      this.getList()
    },
    getList() {
      this.loading = true
      api.getUserList({ ...this.searchObj, pageIndex: this.tableOption.pages.page, pageSize: this.tableOption.pages.size }).then((res) => {
        this.tableOption.data = res.records.map(item => {
          if (item.roleResp && item.roleResp.roleId) {
            item.roleId = item.roleResp.roleId
          }
          return item
        })
        this.tableOption.pages.total = +res.total
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
